<template>
  <zm-dialog :title="dialogTitle" :visible.sync="value" append-to-body :before-close="dialogClose" :close-on-click-modal="false">
    <el-form label-width="120px" :model="params" :rules="rules" ref="form">
      <el-form-item label="菜单名称" prop="name">
        <el-input clearable v-model.trim="params.menuName" placeholder="请输入菜单名称,最多9个字"></el-input>
      </el-form-item>
      <el-form-item label="菜单地址" prop="menuUrl">
        <el-input clearable v-model.trim="params.menuUrl" placeholder="请输入菜单访问地址"></el-input>
      </el-form-item>
      <el-form-item label="接口地址" prop="apiUrl">
        <div class="df">
          <div class="flex-one">
            <el-input class="api mb5" clearable v-model.trim="apiUrl[index]" v-for="(item, index) in apiUrl" :key="index" placeholder="请输入接口地址"></el-input>
          </div>
          <div class="right ml10">
            <el-button type="primary" icon="el-icon-plus" circle @click="addApi"></el-button>
            <el-button type="danger" icon="el-icon-delete" v-if="apiUrl.length>1" circle @click="delApi"></el-button>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="菜单图标" prop="iconUrl">
        <!-- v-if="+params.pId" -->
        <zm-image-upload v-model="params.iconUrl" :limit="1" accept=".jpg, .JPG, .jpeg, .JPEG, .png, .PNG"></zm-image-upload>
      </el-form-item>
      <el-form-item label="菜单同级序号" prop="sort">
        <el-input-number clearable v-model.trim="params.sort"></el-input-number>
      </el-form-item>
      <el-form-item label="菜单状态" prop="status">
        <el-radio v-model="params.status" label="1">启用</el-radio>
        <el-radio v-model="params.status" label="2">停用</el-radio>
      </el-form-item>
    </el-form>
    <div slot="footer" class="tr">
      <el-button @click="dialogClose">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </zm-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialogMixin'
import systemMenu from '@/api/src/systemMenu'
import { ZmImageUpload } from '@/components/ZmUpload'
export default {
  components: { ZmImageUpload },
  mixins: [dialogMixin],
  props: {
    userTabType: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      params: {
        menuUrl: '',
        menuName: '',
        sort: '1',
        status: '1',
        apiUrl: '',
        iconUrl: '',
        pId: '0'
      },
      apiUrl: [''],
      dialogVisible: false,
      level: '',
      rules: {
        menuName: {
          required: true,
          max: 9,
          message: '请输入菜单名称,最多9个字',
          trigger: 'blur'
        },
        menuUrl: {
          required: true,
          message: '请输入菜单访问地址',
          trigger: 'blur'
        },
        sort: { required: true, message: '菜单同级序号', trigger: 'blur' },
        status: { required: true, message: '请选择菜单状态', trigger: 'blur' }
      }
    }
  },
  computed: {
    operateType () {
      return this.obj.operateType
    },
    isAdd () {
      return this.obj.operateType === 'add'
    },
    dialogTitle () {
      return this.obj.operateType === 'edit' ? '编辑菜单' : '新建菜单'
    }
  },
  created () {
    if (!this.isAdd) {
      this.params = {
        ...this.obj
      }
      this.apiUrl = (this.obj.apiUrl && this.obj.apiUrl.split(',')) || ['']
    }
  },
  methods: {
    delApi () {
      if (this.apiUrl.length > 1) {
        this.apiUrl.splice(this.apiUrl.length - 1, 1)
      }
    },
    addApi () {
      this.apiUrl.push('')
    },
    async submit () {
      let _valid = false
      this.$refs.form.validate(valid => {
        _valid = valid
      })
      if (!_valid) return
      if (this.operateType === 'edit') {
        this.$confirm('确定进行该操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const apiUrl = this.apiUrl.filter(item => item.length > 0)
          const params = { ...this.params, apiUrl: apiUrl.join(',') }
          delete params.children
          if (this.isAdd) params.pId = this.obj.menuId
          const res = await (this.isAdd ? systemMenu.createMenu(params) : systemMenu.updateMenu(params))
          this.$emit('after-save', res, params)
          this.$msg.success()
          this.dialogClose()
        }).catch(() => {

        })
      } else {
        const apiUrl = this.apiUrl.filter(item => item.length > 0)
        const params = { ...this.params, apiUrl: apiUrl.join(',') }
        delete params.children
        if (this.isAdd) params.pId = this.obj.menuId
        console.log(this.obj, 'this.obj')
        if (this.obj.position === '1' && this.obj.menuId !== '0') params.position = '2' // 添加按钮只有父层级有
        const res = await (this.isAdd ? systemMenu.createMenu(params) : systemMenu.updateMenu(params))
        this.$emit('after-save', res, params)
        this.$msg.success()
        this.dialogClose()
      }
    }
  }
}
</script>
